<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>chat room</title>
	<style>
		body {
			font-size: 12px;
			font-family: 'microsoft yahei';
			background: #212121;
		}
		#container {
			width: 500px;
			/*border: 1px solid #ccc;*/
			/*box-shadow: 3px 2px 0px rgba(0,0,0,.1);*/
			background: #FFF9C4;
			/*padding: 10px;*/
		}

		#msgbox {
			height: 400px;
			/*border: 1px solid #bbb;*/
			overflow-y: auto;
			/*overflow-y: scroll;*/
			overflow-x: hidden;
		}

		#postbar {
			margin-top: 10px;
			background: #0288D1;
			height: 40px;
			line-height: 40px;
		}

		.msgitem {
			margin: 10px;
		}

		.msgitem:after {
			content: '';
			visibility: hidden;
			display: block;
			clear: both;
		}

		.msgitem-left {
			text-align: left;
		}
		.msgitem-right {
			text-align: right;
		}
		
		.avatar {
			width: 50px;
			height: 50px;
			border-radius: 50%;
			/*border: 2px solid #ddd;*/
			/*display: inline-block;*/
			/*vertical-align: top;*/
		}
		.avatar img {
			width: 100%;
			border-radius: 50%;
			height: 100%;
		}
		.msg-info {
			/*display: inline-block;*/
			min-height: 40px;
			/*line-height: 50px;*/
			vertical-align: top;
			width: 300px;
			background: #448AFF;
			border-radius: 20px;
			text-align: left;
			padding: 5px 20px 5px 20px;
			font-weight: bold;
			color: #fff;
			font-size: 15px;
		}

		.msg-info-right,.avatar-right {
			float: right;
		}
		.msg-info-left,.avatar-left {
			float: left;
		}

		#postbar {
			padding: 2px
		}
		#inputmsg {
			width: 80%;
			border-radius: 5px;
			height: 30px;
			line-height: 30px;
			border: 1px solid #ccc;
			padding:0 1px 0 1px;
		}
		#btnpost{
			width: 18%;
			height: 30px;
			border: 1px solid #ccc;
			border-radius: 5px;
			background: #efefef;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<div id="container">
		<div id="msgbox">
			<div class="msgitem msgitem-right">
				<div class="avatar avatar-right">
					<img src="../bg.jpg" alt="">
				</div>
				<div class="msg-info msg-info-right">谷歌官网上的配色规范的确非但是自己身为设计渣，的但是自己身为设计渣，的</div>
				
			</div>
			<div class="msgitem msgitem-left">
				<div class="avatar avatar-left">
					<img src="../bg.jpg" alt="">
				</div>
				<div class="msg-info msg-info-left">谷歌官网上的配色规范的确非但是自己身为设计渣，的但是自己身为设计渣，的</div>
				
			</div>
		</div>
		<div id="postbar">
			<input type="text" id="inputmsg">
			<input type="button" id="btnpost" value="发送">
		</div>
	</div>
	<script type="text/template" id="msg-template">
		<div class="msgitem {align}">
			<div class="msg-info">{msg}</div>
			<div class="avatar">
				<img src="{avatar}" alt="">
			</div>
		</div>
	</script>
	<script>
		var btnpost = document.querySelector("#btnpost");
		var inputmsg = document.querySelector("#inputmsg");
		var msgbox = document.querySelector("#msgbox");
		var mymsgTpl = document.querySelector("#msg-template").innerHTML;
		var height = msgbox.clientHeight;
		var avatar = '../bg.jpg';


		btnpost.onclick = function() {
			var msg = inputmsg.value;
			var str = mymsgTpl.replace(/\{msg\}/gi,msg)
					.replace(/\{avatar\}/gi,avatar)
					.replace(/\{align\}/gi,"msgitem-right");
			msgbox.innerHTML = msgbox.innerHTML + str;
			//inputmsg.value = "";
			inputmsg.focus();
			var offset = msgbox.scrollHeight - height;
			msgbox.scrollTop = offset;
		}

	</script>

	
</body>
</html>